<template>
    <el-aside :width="sidebar? '200px' : '64px'">
        <el-scrollbar>
            <el-menu
                :default-active="$route.path"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                :router="true"
                background-color="#304156"
                text-color="#bfcbd9"
                :collapse-transition="false"
                :unique-opened="true"
                mode="vertical"
                :collapse="!sidebar">
                <template v-for="(menu, i) in menus">
                    <template v-if="menu.children && menu.children.length">
                        <el-submenu :index="i.toString()" :key="menu.id.toString()">
                            <template slot="title">
                                <i :class="menu.icon" v-if="menu.icon"/>
                                <span>{{ menu.name }}</span>
                            </template>
                            <template v-for="(children, ci) in menu.children">
                                <el-submenu :index="children.url" :key="children.id.toString()" v-if="children.children.length">
                                    <template slot="title">
                                        <i :class="children.icon" v-if="children.icon"/>
                                        <span>{{ children.name }} {{ adminName }}</span>
                                    </template>
                                    <el-menu-item :index="lastChildren.url" v-for="(lastChildren, lastCi) in children.children" :key="lastChildren.id.toString()">
                                        <template slot="title">
                                            <el-link class="child-menu" :href="baseUrl+'#'+lastChildren.url">{{ lastChildren.name }} {{ adminName }}</el-link>
                                        </template>
                                    </el-menu-item>
                                </el-submenu>
                                <el-menu-item :index="children.url" :key="children.id.toString()" v-else-if="children.url">
                                    <template slot="title">
                                        <el-link class="child-menu" :href="baseUrl+'#'+children.url">{{ children.name }} {{ adminName }}</el-link>
                                    </template>
                                </el-menu-item>
                            </template>

                        </el-submenu>
                    </template>
                    <template v-else>
                        <el-menu-item :index="menu.url" v-if="menu.url">
                            <i :class="menu.icon" v-if="menu.icon"/>
<!--                            <span slot-cfg="title">{{ menu.name }}</span>-->
                            <template slot="title">
                                <el-link class="child-menu" :href="baseUrl+'#'+menu.url">{{ menu.name }}</el-link>
                            </template>
                        </el-menu-item>
                    </template>
                </template>
            </el-menu>
        </el-scrollbar>
    </el-aside>
</template>

<script>
    export default {
        name: "Aside",
        data () {
            return {
                baseUrl: '',
                //tableData: [],
                // admin: admin,
                adminName: (admin.name ? '('+ admin.name +')' : ''),
            };
        },
        computed: {
            sidebar () {
                return this.$store.state.backend.sidebar;
            },
            // todo 临时拼凑的三级菜单, 待修改
            menus() {
                let menus = [],
                    pid = 0,
                    tableData = Object.assign({}, this.$store.state.backend.menu);
                // console.log(this.$store.state.backend.menu)
                // 一级
                for (let i in tableData) {
                    if (tableData[i].pid === 0) {
                        menus.push(Object.assign({}, tableData[i], {level: 1, children: []}));
                        delete tableData[i];
                    }
                }
                // 二级
                for (let i in tableData) {
                    pid = tableData[i].pid;
                    for (let mi in menus) {
                        if (menus[mi].id === pid) {
                            menus[mi].children.push(Object.assign({}, tableData[i], {level: 2, children: []}));
                            delete tableData[i];
                        }
                    }
                }
                // 三级
                for (let i in tableData) {
                    pid = tableData[i].pid;
                    for (let mi in menus) {
                        for (let mci in menus[mi].children) {
                            if (menus[mi].children[mci].id === pid) {
                                menus[mi].children[mci].children.push(Object.assign({}, tableData[i], {level: 3, children: []}));
                                delete tableData[i];
                            }
                        }
                    }
                }
                // 没有子级且没有URL 隐藏
                let filterFunc = v => {
                    v = v.filter(vv => {
                        if (vv.children) vv.children = filterFunc(vv.children);
                        return !((!vv.children || !vv.children.length) && !vv.url);
                    })
                    return v
                }
                menus = filterFunc(menus);
                // let a = menus.forEach((v, k) => {
                //     if ((!v.children || !v.children.length) && !v.url) {
                //         menus.splice(k, 1);
                //     }
                // })
                // console.log(a)
                return menus;
            },
        },
        watch: {
            '$route.path' (val) {
                // console.log(val)
            }
        },
        methods: {
            handleOpen(key, keyPath) {
                //console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                //console.log(key, keyPath);
            },
        },
        created() {
            this.baseUrl = window.location.href.split('#')[0]
        }
    }
</script>

<style scoped>
    .el-menu-item.is-active {
        color: #ffffff;
        background: #409eff !important;
    }
    .el-menu-item .child-menu {
        color: rgb(191, 203, 217);
    }
    .el-menu-item.is-active .child-menu {
        color: #ffffff;
    }
</style>
